<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<div id="app" class="container">



<div v-show="listUserDiv">
    <h1>用户信息表</h1>
    <table class="table">
        <thead>
        <tr>
            <th>编号</th>
            <th>用户</th>
            <th>密码</th>
            <th>类型</th>
            <th>备注</th>
            <th>操作</th>
        </tr>
        </thead>

        <tbody>
        <tr v-for="(n,i) in user" :key="i">
            <td>{{i+1}}</td>
            <td>{{n.uname}}</td>
            <td>{{n.upwd}}</td>
            <td>{{n.utype}}</td>
            <td>{{n.uremark}}</td>
            <td>
                <button  @click="doShowOrHide">新增</button>
                 <button @click="doUpdateById(n.ucode)">修改</button>
                 <button @click="doDeleteById(n.ucode)" >删除</button>
                <button @click="doFindById(n.ucode)">详细</button>
            </td>
        </tr>
        </tbody>

    </table>
</div>
</div>






<div v-show="editUserDiv">
    <h1>列表编辑</h1>
    <form class="container">
        <div>
            <label for="uname">用户:</label>
            <input type="text" v-model="uname" class="form-control" id="uname" placeholder="请输入用户名...">
        </div>
        <div>
            <label for="upwd">密码:</label>
            <input type="text" v-model="upwd" class="form-control" id="upwd" placeholder="请输入密码...">
        </div>

        <div>
            <label for="reupwd">确认密码:</label>
            <input type="text" v-model="reupwd" class="form-control" id="reupwd"  placeholder="请输入密码...">
        </div>

        <div>
            <label>
                <input type="radio" v-model="utype" name="utype" value="1"> 管理员
            </label>
        </div>

        <div>
            <label for="uremark">备注:</label>
            <textarea class="form-control" v-model="uremark" rows="3" id="uremark" placeholder="请输入内容..."></textarea>

        </div>
        <button type="button" class="btn btn-default submit" @click="doSaveOrUpdate">保存</button>
        <button type="button" class="btn btn-default cancel" @click="doCancel">返回列表</button>
    </form>


</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var vm=new Vue({
        el:"#app",
        data:{
            user:[],
            ucode:"",
            upwd:"",
            utype:"",
            uname:"",
            listUserDiv:true,
            editUserDiv:false
        },
        methods: {

            doShowOrHide(){
                this.listUserDiv=false;
                this.editUserDiv=true;
            },

            doCancel(){
                this.listUserDiv=true,
                    this.editUserDiv=false
            },

            doresetForm(){
                this.ucode="",
                    this.upwd="",
                    this.utype=0,
                    this.uname=""
            },



            doSaveOrUpdate() {
                //1.定义url
                let url="http://localhost/user/"
                let params={
                        " ucode":this.ucode,
                        "upwd":this.upwd,
                       "utype":this.utype,
                        "uname":this.uname
                }
                        axios({
                                  method: this.ucode?"put":"post",
                    url: url,
                    data: params
            }).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        alert("save ok");
                        this.doGetUser();
                        this.doresetForm();
                        this.doCancel();
                    }else{
                        alert(result.message);
                    }
                })
            },






            doDeleteById(ucode){
                let url=`http://localhost/user/${ucode}`;
                axios.delete(url).then((response)=>{
                    let result=response.data;
                    if (result.state==1){
                        alert(result.message);
                        this.doGetUser();
                    }else{
                        alert(result.message);
                    }
                })
            },



            doUpdateById(ucode){
                let url=`http://localhost/user/${ucode}`;
                axios.get(url).then((response)=>{
                    let result=response.data;//jsonResult
                    if(result.state==1){
                        //修改vue对象中data (model)中的属性的值
                        this.ucode=result.data.ucode;
                        this. upwd=result.data. upwd;
                        this.utype=result.data.utype;
                        this. uname=result.data. uname;
                        this.doShowOrHide();
                    }else{
                        alert(result.message);
                    }
                })
            },




            doFindById(ucode){
                let url=`http://localhost/user/${ucode}`;
                axios.get(url).then((response)=>{
                    let result=response.data;
                    if(result.state==1){
                        //修改vue对象中data (model)中的属性的值
                        this.ucode=result.data.ucode;
                        this.upwd=result.data.upwd;
                        this.utype=result.data.utype;
                        this.uname=result.data.uname;
                        this.doShowOrHide();
                    }else{
                        alert(result.message);
                    }
                })
            },


            doGetUser(){
                let url = "http://localhost/user/";
                axios.get(url).then(function (response){
                    let jsonResult = response.data;
                    console.log(jsonResult);
                    this.vm.user=jsonResult.data;
                })
            }
            },

            mounted() {
                this.doGetUser();
            }
        });
</script>

</body>
</html>






